<template>
  <el-card style="margin-top: 10px;box-shadow: none;border-radius: 8px;margin-top: 20px;">
    <el-form :model="form" ref="form" label-width="100px">
      <div class="card-wrap flex-column justify-end ">
        <div class="card-title-wrap">
          <span>催收结果</span>
          <span></span>
        </div>
      </div>
      <div style="margin-top: 20px; width: 60%;display: flex;justify-content: space-between;align-items: center;margin-left: 20px;">
        <div style="max-width: 80%;display: flex;justify-content: space-between;align-items: center;">
          <p style="font-size: 14px;min-width: 50px;">处理人: </p>
          <p style="font-size: 15px;font-weight: bold;min-width: 70px;flex: 1;">{{ checkEmptyString(form.processedByNames) }}</p>
          <p style="font-size: 14px;width: 150px;color: #1890ff;margin-left: 10px;cursor: pointer;min-width: 120px;" @click="checkHistory(1)">查看派单记录</p>
        </div>
        <div style="max-width: 80%;display: flex;justify-content: space-between;align-items: center;margin-left: 50px;">
          <p style="font-size: 14px;min-width: 60px;">催收策略:</p>
          <dict-tag style="font-size: 15px;font-weight: bold;min-width: 70px;" :options="dict.type.collection_strategy" :value="form.collectionStrategy" />
          <p style="font-size: 14px;width: 150px;color: #1890ff;margin-left: 10px;cursor: pointer;min-width: 100px;" @click="checkHistory(2)">查看催收策略记录</p>
        </div>
      </div>
      <div v-for='(item,i) in form.collectionResult' :key="i">
        <p style="font-size: 14px; margin-left: 20px;">处理人: <span style="font-size: 15px;font-weight: bold;"> {{ item.processedByNames }}{{ item.reassigned }}</span></p>
        <table-page :dataList="item.item" border :total="total">
          <!-- 普通列插槽 -->
          <template slot="tableColAc">
            <el-table-column label="催收策略" align="center" prop="collectionStrategy">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.collection_strategy" :value="scope.row.collectionStrategy" />
              </template>
            </el-table-column>
            <el-table-column label="催收结果" align="center" prop="collectionResult">
              <template slot-scope="scope">
                <span>{{ scope.row.collectionResult==1?'有结果':scope.row.collectionResult==2?'无结果':'超时未处理'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="预计回款时间" align="center" prop="paybackTime" />
            <el-table-column label="预计回款金额" align="center" prop="paybackAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.paybackAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="说明" align="center" prop="remark" min-width="150px" show-overflow-tooltip />
            <el-table-column label="提交时间" align="center" prop="createTime" />
            <el-table-column label="提交人" align="center" prop="createBy" />
          </template>
          <!-- 操作插槽 -->
          <template slot="tableCol">
            <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <e-button v-hasPermi="['channel:gpsRate:edit']" size="mini" type="text" @click="checkHistory(3,scope.row)">查看</e-button>
              </template>
            </el-table-column>
          </template>
        </table-page>
      </div>
    </el-form>
    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" class="form-dialog" width="45%">
      <table-page :loading="loading" :dataList="dataList" border :total="total" v-if="type == 1 || type==2">
        <template slot="tableCol">
          <el-table-column label="处理人" align="center" prop="processedByNames" v-if="type == 1" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.processedByNames }}</span>
            </template>
          </el-table-column>
          <el-table-column label="催收策略" align="center" prop="collectionStrategy" v-if="type == 2">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.collection_strategy" :value="scope.row.collectionStrategy" />
            </template>
          </el-table-column>
          <el-table-column label="提交人" align="center" prop="createBy" />
          <el-table-column label="提交时间" align="center" prop="createTime" />
        </template>
      </table-page>
      <div v-if="type ==3">
        <el-form :model="formDig" ref="formDig" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="催收策略:">
                <dict-tag :options="dict.type.collection_strategy" :value="formDig.collectionStrategy" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="催收结果:">
                <span>{{ formDig.collectionResult==1?'有结果':formDig.collectionResult==2?'无结果':'超时未处理'}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明:">
                <span style="color: black;">{{ formDig.remark }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件:">
                <!-- 1778230879008907265 -->
                <ImageCommon :up-type="2" info="选择附件" :limit="20" v-model="formDig.attachments" :disabled="true"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="催收结果:">
                <span>{{ formDig.collectionResult==1?'有结果':formDig.collectionResult==2?'无结果':'超时未处理'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="预计回款时间:">
                <span style="color: black;">{{ formDig.paybackTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="预计回款金额:">
                <span style="color: black;">{{ format_thousand(formDig.paybackAmount) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  // 催收结果
  name: 'collectionResult',
  dicts: ['collection_strategy'],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      formDig: {},
      loading: false,
      dataList: [],
      open: false,
      title: '',
      total: 0,
      type: null
    };
  },
  created() {

  },
  methods: {
    checkHistory(type, row) {
      this.type = type
      this.open = true
      if (type == 1) {
        this.title = '派单记录'
        this.dataList = JSON.parse(JSON.stringify(this.value?.dispatchRecord));
      } else if (type == 2) {
        this.title = '策略调整记录'
        this.dataList = JSON.parse(JSON.stringify(this.value?.strategyAdjustment));
      } else {
        this.title = '催收结果'
        // 单个数据列表
        this.formDig = row
      }
    },
    cancel() {
      this.open = false
    },
    submitForm() {
      this.open = false
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
</style>
